<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #imglist img{
            width: 200px;
            height: 100px;
            background: url('./imgs/loading.gif') no-repeat center center;
        }
        #imglist{
            width: 98%;
            padding: 10px;
            border: 1px solid #999;
        }
        #imglist img.selected{
            border:5px solid #f00;
            width:190px;
            height:90px;
        }
    </style>
</head>
<body>
    <h1>XML DOM</h1>
    <hr>
    <div id="imglist">
        <img src="./imgs/Meinv001.jpg" id="img01">
        <img src="./imgs/Meinv002.jpg">
        <img src="./imgs/Meinv003.jpg">
        <img src="./imgs/Meinv004.jpg">
        <img src="./imgs/Meinv005.jpg">
        <img src="./imgs/Meinv006.jpg">
        <img src="./imgs/Meinv007.jpg">
        <img src="./imgs/Meinv008.jpg">
        <img src="./imgs/Meinv009.jpg">
        <img src="./imgs/Meinv010.jpg">
        <img src="./imgs/Meinv011.jpg">
        <img src="./imgs/Meinv012.jpg">
        <img src="./imgs/Meinv013.jpg">
        <img src="./imgs/Meinv014.jpg">
        <img src="./imgs/Meinv015.jpg">
    </div>

    <br>
    <button onclick="deleteImg()">删除指定的图片</button>
    <button onclick="replaceImg()">替换选定的图片</button>

    <button onclick="appendImg()">追加图片</button>
    <button onclick="insertImg()">指定位置添加图片</button>

    <button onclick="createImg()">创建节点</button>
    <button onclick="cloneImg()">克隆图片</button>


    <br>
    <img src="./imgs/Meinv018.jpg" alt="" width="200" id="myimg">

    <script>
        //创建属性节点
        //1.
        var title = document.createAttribute('title');
        title.nodeValue = '艳艳';
        img01.setAttributeNode(title);
        //2.
        img01.setAttribute('title', '静静');
        //3.
        img01.title = '哒哒';

        function cloneImg(){
            //克隆自己及子节点    true!
            imglist.parentNode.appendChild(imglist.cloneNode(true));
        }


        //选定图片
        var imgs = imglist.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function (){
                if (this.className == '') {
                    this.className = 'selected';
                } else{
                    this.className = '';
                }
            }
        }

        //创建节点
        function createImg(){
            var img = document.createElement('img');
            img.src = './imgs/Meinv017.jpg';
            console.log(img);
            imglist.appendChild(img);
        }

        //指定位置添加节点
        function insertImg(){
            imglist.insertBefore(myimg, imgs[3]);
        }

        //追加图片
        function appendImg(){
            imglist.appendChild(myimg);
        }


        //替换图片
        function replaceImg(){
            for (var i = 0; i < imgs.length; i++) {
                if (imgs[i].className == 'selected') {
                    //克隆节点 执行替换 
                    imglist.replaceChild(myimg.cloneNode(), imgs[i]);
                    //删除ID属性节点
                    imgs[i].removeAttribute('id');
                }
            }
        }






        //删除选定的图片
        function deleteImg(){
            for (var i = 0; i < imgs.length; i++) {
                //如果classname为selected   就删掉
                if (imgs[i].className == 'selected') {
                    imglist.removeChild(imgs[i]);
                    i--;
                }
            }
        }

    </script>

</body>
</html>